<template>
  <div class="aa">
    <div class="usermanage">
      <div class="msg">单位管理</div>
      <div class="usermanagebutton">
          <el-button-group class="ml-4">
          <el-button type="primary" :icon="Edit" />
          <el-button type="primary" :icon="Delete" @click="open" />
          </el-button-group>
          <el-button-group class="btn-left">
            <el-button type="primary">显示 | 隐藏</el-button>
            <el-button type="primary">复制</el-button>
            <el-button type="primary">导出</el-button>
          </el-button-group>
      </div>
      <div class="table_top">
        <el-input v-model="input2" class="input_" placeholder="Please Input" :prefix-icon="Search"/>
      </div>
    
    <div class="table_bottom">
      <el-pagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      background
      layout="total,prev, pager, next, jumper"

      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="height: 49px;margin-left: 450px;"
    />
    </div>
    </div>
  </div>
</template>
  
<script setup>
import { onMounted,ref } from 'vue'
import {Delete,Edit,Search } from '@element-plus/icons-vue'
// import { ElMessage, ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.confirm(
    'proxy will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
</script>

<style>
.aa{
  position: absolute;
  width: 84%;
}
.usermanage{
  position: relative;
  height: 520px;
  width: 100%;

}
 .msg{
  position: relative;
  font-size: 20px;
  margin-top: 25px;
  border-bottom:1px solid #dec4c4;
}
.table_top{
  position: relative;
  height:50px;
  width: 100%;
  background-color: rgb(219, 222, 222);
  float: left;
  margin-top: 6px;
}
.table_top .input_{
  width:15%;
  float: right;
  display: flex; 
  padding-top: 10px;
  margin-right: 22px;
}
.table_bottom{
  position: relative;
  height:50px;
  width: 100%;
  background-color: rgb(200, 210, 210);
  float: left;
}
.ml-4{
  position:relative;
  float: left;
  padding-top:8px;
}
.btn-left{
  position:relative;
  padding-top:8px;
 float: right;
}

</style>